<template>
    <n-grid x-gap="12" :cols="4">
        <n-gi :span="1">
            <n-card  title="操作记录" class="min-h-chart-height h-full">
                <n-scrollbar style="max-height: 500px">
                    <n-timeline>
                        <n-timeline-item v-for="(i, index) in date_list" :key="i"
                            :time="new Date(i * 1000).toISOString().split('T')[0]">
                            <template v-if="index == 0">
                                回测开始
                            </template>
                            当前总资产{{ total_assets_list[index].toFixed(2) }}

                            <template v-if="operation_list[index].length != 0">
                                ，
                                <template v-for="i in operation_list[index]" :key="i.id">
                                    <template v-if="i.operation_type == 'BUY'">
                                        购买</template>

                                    <template v-else>
                                        出售
                                    </template>
                                    【 {{ i.name }}】{{ i.amount }}只
                                </template>
                            </template>

                            <template v-if="index == date_list.length - 1">
                                回测结束
                            </template>
                        </n-timeline-item>
                    </n-timeline>
                </n-scrollbar>
            </n-card>
        </n-gi>
        <n-gi :span="3">
            <n-flex>
                <n-card title="评测指标"  class="h-full">
                    <n-descriptions label-placement="top" :column="4">
                        <n-descriptions-item v-for="i in indicator_list" :key="i.id" :label="i.name">
                            <span class="text-xl">{{ Math.max(i.value.toFixed(4), 0.0001)}}</span>
                        </n-descriptions-item>
                    </n-descriptions>

                </n-card>
                <n-grid x-gap="12" y-gap="12" :cols="4">
                    <n-gi :span="4">
                        <n-card title="收益率变化曲线" class="h-full">
                            <v-chart autoresize :option="options" class="h-chart-height w-full"></v-chart>
                        </n-card>
                    </n-gi>
                </n-grid>

            </n-flex>
        </n-gi>

    </n-grid>
</template>

<script setup>
import { RemoveRedEyeFilled } from '@vicons/material';
import ResultItemComponent from '@/components/ResultItemComponent.vue';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import VChart from 'vue-echarts';

const props = defineProps(['date_list', 'operation_list', 'total_assets_list', 'return_list', 'compare_stock', 'item_list','indicator_list','daily_returns'])
const date_list = props.date_list;
const return_list = props.return_list;
const compare_stock = props.compare_stock;
const item_list = props.item_list;
const description_list = [
    {
        label: '回报率',
        value: '15%'
    },
    {
        label: '最大回撤',
        value: '15%'
    },
    {
        label: '夏普比率',
        value: '13%'
    },
    {
        label: 'sortino比率',
        value: '12%'
    },
]


const date_string_list = [];
date_list.forEach(function (secondsTimestamp) {
    var millisecondsTimestamp = secondsTimestamp * 1000; //将秒级时间戳转换为毫秒级时间戳
    var date = new Date(millisecondsTimestamp); //创建日期
    var isoDate = date.toISOString().slice(0, 10); //获取ISO日期格式，只保留日期部分
    date_string_list.push(isoDate); //将ISO格式日期添加到数组中
})



const options = ref({
    legend: {
        data: ['此策略']
    },
    xAxis: {
        type: 'category',
        data: date_string_list
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'axis', // 触发类型，这里是鼠标悬停在数据项上时触发
        axisPointer: { // 坐标轴指示器配置项
            type: 'shadow' // 坐标轴指示器类型，这里配置为阴影指示器
        }
    },
    series: [
        {
            name: '此策略',
            data: return_list,
            type: 'line',
            smooth: true,
            markArea: {
                itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                },
                data: []
            }
        },
    ]
})
onMounted(() => {
    addCompareStockData();
    addItem();
})
const addCompareStockData = () => {
    options.value.legend.data.push(compare_stock.name)
    options.value.series.push({
        name: compare_stock.name,
        data: compare_stock.return_list,
        type: 'line',
        smooth: true
    })

}
const addItem = () => {
    for (let i of item_list) {
        options.value.series[0].markArea.data.push(
            [
                {
                    name: '事件' + i.name + '发生',
                    xAxis: new Date(i.start_date * 1000).toISOString().split('T')[0]
                },
                {
                    xAxis: new Date(i.end_date * 1000).toISOString().split('T')[0]
                }
            ]
        )
    }

console.log(options.value.series[0].markArea.data);
}
</script>